@extends('layouts.admin_common')

@section('content')

    <!-- SSLの場合 -->
    @if(app('env')=='production')
        <link rel="stylesheet" href="{{ secure_asset('/css/home.css') }}">
        <link rel="stylesheet" href="{{ secure_asset('/css/category.css') }}">
        <script src="{{ secure_asset('/js/home.js') }}"></script>
        <script src="{{ secure_asset('/js/sy_common.js') }}"></script>
    @else
        <!-- SSLではない場合 -->
        <link rel="stylesheet" href="{{ asset('/css/home.css') }}">
        <link rel="stylesheet" href="{{ asset('/css/category.css') }}">
        <script src="{{ asset('/js/home.js') }}"></script>
        <script src="{{ asset('/js/sy_common.js') }}"></script>
    @endif


    <script type="text/javascript">
        function gotoNext(prm) {
            location.href = './' + prm;
        }
        $(function () {
            var $col = $('.col-smrb').toArray();
            var size = $col.length;
            //將 col-smpic類別的元素讀成陣列，並計算總共有幾個元素要被輪播
            var i = 0;
            delayedUpdatelist(i, size);
            //初始輪播效果，從第 0 個元素開始播，輪播效果的 function 在下面
        });
    </script>


    <div class="system_tab_line"></div>
    <div class="admin_home_link_title"></div>
    <!-- li add start -->
    @include('customer.home_nav')
    <!--  li add end -->

    <!-- <div class="container">-->
    <div class="row">
        <div class="col-sm-2">
            Category 商品カテゴリ
            <ul class="list-group">
                @foreach($treeData as $vo)
                    <li class="list-group-item list-group-item-primary py-1">
                        <div class="row">
                            @isset($vo['category_image'])
                                <div class="col-sm-3" style="padding: 0">
                                    <img src="{{ asset($vo['category_image']) }}" style="width:50px;height:50px;"/>
                                </div>
                            @endisset
                            <div class="col-sm-9 fl row">
                                <div class="col-sm-12" style="font-size: 14px;color: black">
                                    <a href="#" class="lyx_cat_dump_rul"
                                       data-cat_id="{{$vo['id']}}" data-cat_name="{{$vo['category_name']}}"> {{$vo['category_en']}}</a>
                                </div>
                                <div class="col-sm-12"
                                     style="font-size: 10px;color: #5a6268">{{$vo['category_name']}}</div>
                            </div>
                        </div>
                        @isset($vo['childs'])
                            <ul>
                                @foreach($vo['childs'] as $ch)
                                    <li class="list-group-item list-group-item-primary py-1 dropdown-item">
                                        <a href="#" class="lyx_cat_dump_rul"
                                           data-cat_id="{{$ch['id']}}" data-cat_name="{{$ch['category_name']}}"><u>{{$ch['category_name']}}</u></a>
                                    </li>
                                @endforeach
                            </ul>
                    @endisset
                @endforeach
            </ul>
        </div>
        <div style="padding-left:100px;" id="lyx_goods_list" class="col-sm-8">

            <div class="col-lg">
                <?php if ( 0 < count($newGoods)):?>
                <span class="label label-danger"> NEW ITEM</span>
                <div class="row">
                    @foreach($newGoods as $good)
                    <div class="col-smrb lyx_goods_detail" data-goods_id="{{$good->goods_id}}">
                        <img src="{{ $good->img_url}}"
                             style="width: 100px; height: 100px;"/>
                    </div>
                    @endforeach
                </div>
                <?php endif;?>
            </div>

            {{--<div class="col-lg">--}}
                {{--<span class="label label-danger"><b>SALE</b>	セール対象商品</span>--}}
                {{--<div class="row">--}}
                    {{--<div class="col-smrb" style="border:2px solid black;">--}}
                        {{--<img src="{{ asset('/image/bag.jpg') }}" style="width:100px;height:100px;"/>--}}
                    {{--</div>--}}
                    {{--<div class="col-smrk" style="border:2px solid black;">--}}
                        {{--<img src="{{ asset('/image/bag.jpg') }}" style="width:100px;height:100px;"/>--}}
                    {{--</div>--}}
                    {{--<div class="col-smmn" style="border:2px solid black;">--}}
                        {{--<img src="{{ asset('/image/bag.jpg') }}" style="width:100px;height:100px;"/>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2">
            <div class="row" style="height:60px;margin-top:5px;">
                <div class="col-sm-2"><img src="{{ asset('/image/logo2.jpg') }}" width="180px;"/></div>
            </div>
            <div class="row" style="height:60px;">
                <div class="col-sm-2"><img src="{{ asset('/image/btn_catalog.jpg') }}" width="180px;height:40px;"/>
                </div>
            </div>
            <div class="row" style="height:60px;">
                <div class="col-sm-2"><img src="{{ asset('/image/btn_facebook.jpg') }}" width="180px;height:40px;"/>
                </div>
            </div>
        </div>
        <div class="col-lg" style="width:50%;text-align:center;padding-top:150px;">
            <b>Infomation</b> 最新情報
            <div>
                <p>2018/8/24 新商品入荷しました。</p>
                <p>2018/8/31 サイズメンテナンスのご案内。</p>
            </div>
        </div>
        <div class="col-sm-2" style="width:50%;text-align:center;padding-top:150px;">
            <button class="btn btn-primary">編集</button>
        </div>
    </div>
    <div style="width:100%;text-align:center;margin-top:10px;">
        <button class="btn btn-primary">問い合わせ</button>
        <span style="margin-left:20px;">株式会社anddroJapan TEL:047-440-8772 営業時間：平日10：00～16：00</span></div>

    <script>

        goodsDetailAction();

        $(".lyx_cat_dump_rul").on('click', function () {
            var cat_id = $(this).data('cat_id');
            var cat_name = $(this).data('cat_name');
            getGoods(cat_id,cat_name);
        })


        function getGoods(category_id,cat_name) {
            $('#lyx_goods_list').html('<h2 style="padding: 40px;">loading</h2>');
            hdAjax({
                url: "{{url('/admin/use_catget_goods')}}",
                data: {cat_id: category_id},
                success: function (retData) {
                    if (retData.code = 1001) {
                        var html = list_html(retData.data,cat_name);
                        if (retData.data.length == 0) {
                            $('#lyx_goods_list').html('<h2 style="padding: 40px;">商品がない</h2>');
                        } else {
                            $('#lyx_goods_list').html(html);
                            goodsDetailAction();
                        }
                    }
                }
            })
        }


        function list_html(data,cat_name) {
            var html1 = '';
            var html3 = '<span class="label label-danger"><b>商品カテゴリ:'+cat_name+'</b></span>';
            var html4 = '<div class="row">'
            $.each(data, function (index, item) {
                var htmlNow = ['<div class="col-lg-3 row lyx_goods_detail" data-goods_id="'+item.goods_id+'">',
                    '   <div class="col-lg-12"><a href="#"> <img src="' + item.image_url + '" style="width:150px;height:150px;"/></a></div>',
                    '   <div class="col-lg-12" style="text-align: center;font-size: 16px;font-weight: bold">' + item.goods_name + '</div>',
                    '</div>'].join("");
                html1 += htmlNow;
            })
            html1 = html3 + html4 + html1 + '</div>';
            return html1;
        }

        function goodsDetailAction() {
            $('.lyx_goods_detail').off().on('click',function () {
                var goods_id = $(this).data('goods_id');
                get_goods_detail(goods_id)
            })
        }

        function get_goods_detail(goods_id) {
            $.ajax({
                url:"{{url('/customer/goods_detail')}}",
                data:{goods_id:goods_id},
                success:function (retData) {
                    $('#lyx_goods_list').html(retData);
                }
            })
        }

    </script>

@endsection
